
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Room Booking Form Flat Responsive Widget Template :: w3layouts</title>
    <!-- custom-theme -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Room Booking Form Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- //custom-theme -->
    <!-- js -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/Ionicons/css/ionicons.min.css}">
    <!-- daterange picker -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css}">

    <link rel="stylesheet"
          th:href="@{/adminlte/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css}">


    <!-- //js -->
    <!-- font-awesome-icons -->
    <link th:href="@{/css/font-awesome-form.css}" rel="stylesheet">
    <!-- //font-awesome-icons -->
    <link th:href="@{/css/style-form.css}" rel="stylesheet" type="text/css" media="all"/>

</head>
<body>
<div class="main" th:style="'background:url(' + @{/images/banner-form.jpg} + ')'">
    <h1 th:text="${room.roomType}+'订单'"></h1>
    <h3 th:text="'一日'+${room.roomPrice}"></h3>
    <div class="w3_agile_main_grids">

        <div th:object="${room}">
            房间价格：<span id="" th:text="*{roomPrice}"></span><br/>

        </div>
        <div th:object="${order}">
            <div th:object="${order}">
                訂單ID：<span name="orderid" th:text="*{orderId}" th:value="${order.orderId}"></span><br/>
                訂單内容：<span name="subject" th:text="*{orderDesc}" th:value="${order.orderDesc}"></span><br/>
                <!--訂單支付狀態：<span th:text="*{orderPayStatus}"></span><br/>-->
                支付金額：<span name="price" th:text="*{orderPayment}" th:value="${order.orderPayment}"></span><br/>
                <!--發票類型：<span th:text="*{invoiceType}"></span><br/>-->
                訂單狀態：<span  th:text="*{orderStatus}" ></span><br/>
                <!--訂單時間：<span th:text="*{#dates.format(orderReserve, 'yyyy-MM-dd hh:mm:ss')}"></span><br/>-->
                <!--預計入住時間：<span th:text="*{#dates.format(orderInTime, 'yyyy-MM-dd hh:mm:ss')}"></span><br/>-->
                <!--用戶電話：<span id="subject" th:text="*{uPhone}" th:value="${order.uPhone}"></span><br/>-->
                <!--房間ID：<span th:text="*{rId}"></span><br/>-->
                用戶ID：<span th:text="*{uId}"></span><br/>
                <!--酒店ID：<span th:text="*{hId}"></span><br/>-->
                <!--权限：<span th:text="${user.popedom==0?'管理员':'普通用户'}"></span><br/>-->
            </div>
        </div>

        <form id="SignupForm" action="/order/alipay" class="agile_form" method="post">
            <fieldset>

                <h3>用户信息</h3>

                <div class="form-group agileits_w3layouts_form w3_agileits_margin">
                    <div class="wthree_input">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        <input id="Name" type="text" name="Name" class="form-control" placeholder="姓名" required=""/>
                    </div>
                </div>
                <div class="form-group agileits_w3layouts_form ">
                    <div class="wthree_input">
                        <i class="fa fa-envelope" aria-hidden="true"></i>
                        <input id="phone" type="text" name="text" class="form-control" placeholder="电话" required=""
                               onBlur="checkPhone()"/>
                        <div style="display:none;" id="false">电话号码不正确！</div>
                    </div>
                </div>
                <div class="clear"></div>
            </fieldset>
            <fieldset>
                <h3 class="w3_room">支付方式</h3>
                    <div class="form-group agileits_circles">

                            <span aria-hidden="true" class=""><img th:src="@{/images/ffd48aa46fdf8d2cee76063ce929a7c9.png}"
                                                          width="50" height="50"></span>
                            <label class="radio" >
                                <input type="radio" name="radio" class="col-md-12">
                                <i class=""></i>支付宝
                            </label>

                    </div>
                <div class="clear"></div>
            </fieldset>

            <div th:object="${order}" style="display:none">
                <div th:object="${order}">
                    訂單ID：<input type="hidden" name="orderid" th:text="*{orderId}" th:value="${order.orderId}"><br/>
                    訂單内容：<input name="subject" th:text="*{orderDesc}" th:value="${order.orderDesc}"><br/>
                    <!--訂單支付狀態：<span th:text="*{orderPayStatus}"></span><br/>-->
                    支付金額：<input name="price" th:text="*{orderPayment}" th:value="${order.orderPayment}"><br/>
                    <input type = "hidden" name="body" value="0"/>
                </div>
            </div>
            <p>
                <button id="SaveAccount" class="btn btn-primary agileinfo_primary submit">Submit form</button>
            </p>
        </form>

        <div class="agileits_copyright">
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>

<script th:src="@{/js/jquery.validate.min.form.js}"></script>
<script th:src="@{/js/jquery.formtowizard.form.js}"></script>
<script th:src="@{/adminlte/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/adminlte/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js}"></script>

<!-- Select2 -->
<script th:src="@{/adminlte/bower_components/select2/dist/js/select2.full.min.js}"></script>
<!-- InputMask -->
<script th:src="@{/adminlte/plugins/input-mask/jquery.inputmask.js}"></script>
<!-- date-range-picker -->
<script th:src="@{/adminlte/bower_components/moment/min/moment.min.js}"></script>
<script th:src="@{/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js}"></script>


</body>

<script>$(document).ready(function () {
    $("#phone").blur(function () {
        var phone = $("#phone").val();
        // while (1==1){
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) {

            alert("电话输入错误")
        }
    });
})</script>
</html>